@mixin text-line($value) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $value;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
  word-break: break-all;
}

.dashboard-report {
  height: 320px;
  padding-top: 20px;
  overflow: hidden;
  .report-main-box {
    z-index: 0;
    position: relative;
    height: 300px;
    display: flex;
    justify-content: space-between;
    .left-chart {
      position: relative;
      width: 100%;
      padding-left: 20px;
      .radios {
        color: #4E5B71;
        line-height: 28px;
        height: 28px;
        margin-top: 12px;
        .radio-and-select {
          display: flex;
          justify-content: space-between;

          .select-box {
            display: flex;
          }
          .dashboard-report-chooser {
            display: inline-block;
            margin-right: 8px;
            width: 150px;
          }
        }
        .ant-radio-group {
          .ant-radio-button-wrapper {
            padding: 0 12px;
            color: #4E5B71;
            background: #F7F8FA;
            border-color: #EBF0F5;
          }
          .ant-radio-button-wrapper-checked {
            color: #fff;
            background: #4B8DFF;
            border-color: #4B8DFF;
            font-weight: 500;
          }
          .ant-radio-button-wrapper:not(:first-child)::before {
            background-color: #EBF0F5;
          }
        }
      }
      .chart-box {
        margin-top: 12px;
        &::-webkit-scrollbar {
          display: none;
        }
        .empty-chart {
          .img-box {
            width: 120px;
            height: 110px;
            margin: 17px auto 8px auto;
            .img {
              user-select: none;
              width: 120px;
              height: 110px;
            }
          }
          .tip {
            font-size: 14px;
            color: #4E5B71;
            text-align: center;
            line-height: 20px;
          }
        }
      }
    }
    .right-data {
      flex-shrink: 0;
      width: calc((100% - 20px)/3 + 20px);
      padding: 0 0 20px 20px;

      .index-box {
        display: flex;
        justify-content: space-between;
        padding-right: 20px;

        .single-index-box {
          //width: 33%;
          .index-title {
            font-size: 14px;
            color: #848C95;
            letter-spacing: 0.1px;
            line-height: 20px;
          }
          .index-number {
            font-size: 14px;
            color: #848C95;
            letter-spacing: 0.1px;
            text-align: right;
            line-height: 20px;
            margin-top: 6px;
          }
          .index-number-bold {
            font-weight: 500;
            font-size: 16px;
            color: #1E2126;
            letter-spacing: 0.1px;
            line-height: 24px;
            margin-top: 4px;
          }
        }
      }
      .detail-box {
        margin-top: 14px;
        height: 220px;
        overflow: auto;
        padding-right: 12px;
        margin-right: 4px;
        .list-fee {
          margin-bottom: 8px;
          display: flex;
          justify-content: space-between;
          .img-box {
            margin-right: 8px;
            flex-shrink: 0;
            width: 28px;
            height: 28px;
            .img {
              user-select: none;
              width: 28px;
              height: 28px;
            }
          }
          .info-box {
            width: 100%;
            .index-flex {
              display: flex;
              justify-content: space-between;
              .name {
                width: 33%;
                font-size: 12px;
                color: #6C788C;
                letter-spacing: -0.2px;
                line-height: 16px;
                @include text-line(1);
              }
              .percent {
                flex-shrink: 0;
                width: 33%;
                font-size: 12px;
                color: #B5C0CE;
                letter-spacing: -0.2px;
                text-align: center;
                line-height: 16px;
              }
              .amount {
                flex-shrink: 0;
                width: 33%;
                font-weight: 500;
                font-size: 12px;
                color: #4E5B71;
                letter-spacing: -0.2px;
                text-align: right;
                line-height: 16px;
              }
            }
            .ant-progress-line {
              top: -4px;
            }
            .ant-progress-bg {
              background: #4B8DFF;
            }
          }
          &:last-child {
            margin-bottom: 40px;
          }
        }
        /* 设置滚动条的样式 */
        &::-webkit-scrollbar {
          width: 4px;
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          border-radius: 4px;
          background: #D7DCE6;
        }
        .empty-fees-box {
          .img-box {
            margin: 68px auto 12px auto;
            width: 48px;
            height: 48px;
            .img {
              user-select: none;
              width: 48px;
              height: 48px;
            }
          }
          .tip {
            font-size: 14px;
            color: #B5C0CE;
            text-align: center;
            line-height: 20px;
          }
        }
      }
    }
  }
  .no-privilege {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &::-webkit-scrollbar {
    display: none;
  }
}

.dashboard-report-tooltip {
  .year-title {
    font-size: 14px;
    color: #848C95;
    letter-spacing: 0.1px;
    line-height: 20px;
    margin-bottom: 8px;
  }
  .single-value {
    min-width: 100px;
    font-size: 12px;
    color: #4E5B71;
    letter-spacing: 0.1px;
    line-height: 16px;
    margin-bottom: 12px;
    .dot {
      display: inline-block;
      border-radius: 2px;
      width: 8px;
      height: 8px;
      margin-right: 5px;
    }
    .value-text {
      color: #000F00;
      font-weight: 500;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}

@media screen and (max-width: 1300px) {
  .dashboard-report .report-main-box .left-chart .radios .ant-radio-group {
    position: absolute;
    top: 0;
    right: 0;
  }
}
